<template>
  <div class="code">
    <div class="box">
      <div class="community">社区任务 </div>
      <div class="title">日常任务可以奖励多次，相关值必须为大于0的整数</div>
    </div>
    <div class="table">
      <div class="top">
        <div class="item-title">发布的作品被浏览1次</div>
        <div class="item-code">积分</div>
        <div>
          <el-input-number class="top-size" v-model="form.by_browse" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>
        </div>
        <div class="item-code">每日上限</div>
        <div>
          <el-input-number class="top-size" v-model="form.by_browse_limit" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>

        </div>
      </div>
      <div class="top">
        <div class="item-title">发布的作品被点赞1次</div>
        <div class="item-code">积分</div>
        <div>
          <el-input-number class="top-size" v-model="form.by_like" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>
        </div>
        <div class="item-code">每日上限</div>
        <div>
          <el-input-number class="top-size" v-model="form.by_like_limit" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>
        </div>
      </div>
      <div class="top">
        <div class="item-title">发布作品被有效评论1次</div>
        <div class="item-code">积分</div>
        <div>
          <el-input-number class="top-size" v-model="form.by_comment" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>
        </div>
        <div class="item-code">每日上限</div>
        <div>
          <el-input-number class="top-size" v-model="form.by_comment_limit" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>
        </div>
      </div>
      <div class="top">
        <div class="item-title">发布作品被转发1次</div>
        <div class="item-code">积分</div>
        <div>
          <el-input-number class="top-size" v-model="form.by_share" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>

        </div>
        <div class="item-code">每日上限</div>
        <div>
          <el-input-number class="top-size" v-model="form.by_share_limit" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>

        </div>
      </div>
      <div class="top">
        <div class="item-title">浏览文章/作品1次</div>
        <div class="item-code">积分</div>
        <div>
          <el-input-number class="top-size" v-model="form.browse" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>
        </div>
        <div class="item-code">每日上限</div>
        <div>
          <el-input-number class="top-size" v-model="form.browse_limit" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>
        </div>
      </div>
      <div class="top">
        <div class="item-title">点赞文章/作品1次</div>
        <div class="item-code">积分</div>
        <div>
          <el-input-number class="top-size" v-model="form.like" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>
        </div>
        <div class="item-code">每日上限</div>
        <div>
          <el-input-number class="top-size" v-model="form.like_limit" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>

        </div>
      </div>
      <div class="top">
        <div class="item-title">发布有效评论1次</div>
        <div class="item-code">积分</div>
        <div>
          <el-input-number class="top-size" v-model="form.comment" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>
        </div>
        <div class="item-code">每日上限</div>
        <div>
          <el-input-number class="top-size" v-model="form.comment_limit" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>

        </div>
      </div>
      <div class="top">
        <div class="item-title">分享文章/作品1次</div>
        <div class="item-code">积分</div>
        <div>
          <el-input-number class="top-size" v-model="form.share" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>

        </div>
        <div class="item-code">每日上限</div>
        <div>
          <el-input-number class="top-size" v-model="form.share_limit" :min="0" :max="99" oninput="if(value.length>2)value=value.slice(0,2)"></el-input-number> <span>分</span>

        </div>
      </div>
    </div>
    <div>
      <el-button @click="subMsg()" type="primary" class="topstyle">提 交</el-button>
    </div>

  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      form: {},
      browse: null
    }
  },
  mounted () {
    this.getMsg()
  },
  methods: {
    // BlurText(e){
    //   let boolean = new RegExp("^[0-9]*$").test(e.target.value)
    //   if(!boolean){
    //     e.target.value=0
    //     this.$message.warning('请输入正整数')
    //   }
    // },
    // focusText(e){
    // console.log(e.target.value)
    // e.target.value=0
    // },
    subMsg () {
      let param = {
        by_browse: Number(this.form.by_browse),
        by_browse_limit: Number(this.form.by_browse_limit),
        by_like: Number(this.form.by_like),
        by_like_limit: Number(this.form.by_like_limit),
        by_comment: Number(this.form.by_comment),
        by_comment_limit: Number(this.form.by_comment_limit),
        by_share: Number(this.form.by_share),
        by_share_limit: Number(this.form.by_share_limit),
        browse: Number(this.form.browse),
        browse_limit: Number(this.form.browse_limit),
        like: Number(this.form.like),
        like_limit: Number(this.form.like_limit),
        comment: Number(this.form.comment),
        comment_limit: Number(this.form.comment_limit),
        share: Number(this.form.share),
        share_limit: Number(this.form.share_limit),
        id: this.form.id
      }
      seviceApi.integralSave(param).then(res => {
        if (res && res.data.code == 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
      })
    },
    // 获取信息

    getMsg () {
      seviceApi.integralRecordInfo().then(res => {
        if (res && res.status == 200) { this.form = res.data.data }
      })
    }

  }

}
</script>

<style lang="scss" scoped="scoped">
.top-size {
  margin-top: 3px;
}
.topstyle {
  margin-top: 30px;
}
.table {
  margin-top: 30px;
  // width: 55%;
  border: 1px solid rgba(228, 228, 228, 1);
  .top:last-child {
    border: none;
  }
  .top {
    border-bottom: 1px solid rgba(228, 228, 228, 1);
    display: flex;
    .item-content {
      display: flex;
      border: 1px solid rgba(228, 228, 228, 1);
      margin: 5px;
      input {
        width: 100px;
        box-shadow: none;
        outline: none;
        resize: none;
        border: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        height: 30px;
      }
      div {
        background-color: #f2f2f2;
        width: 40px;
        text-align: center;
        font-size: 16px;
        padding-top: 5px;
        color: #999999;
      }
    }
    .item-title {
      width: 300px;
      padding: 15px 10px 10px 60px;
      text-align: right;
      background-color: rgba(242, 242, 242, 1);
      border-right: 1px solid rgba(228, 228, 228, 1);
      font-size: 14px;
      font-weight: 400;
      color: #666666;
    }
    .item-code {
      padding: 13px 5px 10px 30px;
      font-size: 14px;
      color: #666666;
    }
  }
}
.box {
  display: flex;
  .community {
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
  }
  .title {
    font-size: 14px;
    color: #cccccc;
  }
}
</style>
